<template>
  <div class="home">
    <Menu />
    <div class="prl20 mt30">
      <TitleReth
        title="xiangqing"
        :content="details.contestText"
        :videoSrc="details.contestVideoUrl"
        :contestFileId="details.contestFileId"
      />
      <div class="mt30">
        <TitleReth title="jindu" :content="details.contestSchedule" />
      </div>
      <div class="mt30">
        <TitleReth title="shuoming" :content="details.awardDescription" />
      </div>
      <div class="mt30">
        <TitleReth title="liucheng" :content="details.contestProcess" />
      </div>
      <div class="mt30">
        <HYTitle title="zhanshi" morePath="/worksList" />
        <WorksList :list="workList" />
      </div>
      <div class="mt30">
        <HYTitle title="baodao" morePath="/report" />
        <ReportList :list="reporList" />
      </div>
      <div class="mt30">
        <HYTitle title="huigu" morePath="/look" />
        <LookList :list="lookList" />
      </div>
      <div class="mt30" style="margin-bottom: 45px">
        <Search />
      </div>
      <div style="margin-bottom: 40px">
        <Us :list="rightContent" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Menu from "@/components/Menu.vue";
import { defineComponent, onMounted, reactive, toRefs, computed } from "vue";
import TitleReth from "@/components/TitleReth.vue";
import HYTitle from "@/components/HYTtile.vue";
import WorksList from "@/components/WorksList.vue";
import ReportList from "@/components/ReportList.vue";
import Search from "@/views/home/components/Search.vue";
import Us from "@/views/home/components/Us.vue";
import LookList from "@/components/LookList.vue";

import { getDetails, gitWorksVote, selectNewsList } from "@/utils/apis/home";
export default defineComponent({
  components: {
    Menu,
    TitleReth,
    HYTitle,
    WorksList,
    ReportList,
    LookList,
    Search,
    Us,
  },
  setup() {
    const state = reactive({
      details: {} as any,
      workList: [],
      reporList: [],
      lookList: [],
    });

    const rightContent = computed(() => {
      if (state.details.rightContent) {
        return JSON.parse(state.details.rightContent);
      } else {
        return [];
      }
    });
    onMounted(async () => {
      //详情
      const res = await getDetails();
      state.details = res.data;
      const workList = await gitWorksVote({ page: 1, pageSize: 8 });
      state.workList = workList.data.list;
      const reporList = await selectNewsList({
        page: 1,
        pageSize: 8,
        category: 10,
      });
      console.log(reporList, "reporList");
      state.reporList = reporList.data.list;
      const lookList = await selectNewsList({
        page: 1,
        pageSize: 8,
        category: 11,
      });
      state.lookList = lookList.data.list;
      console.log(lookList.data.list);
    });
    // toRefs 对数据进行包装优化 在模板里边使用的时候 可以去掉 state 直接访问state内部数据
    return { ...toRefs(state), rightContent };
  },
});
</script>
<style lang="scss"></style>
